<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>随机点名</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #eaffd0;
        }

        .container {
            width: 1200px;
            max-width: 100%;
            padding: 20px;
            background-color: #fce38a;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        #info {
            width: 50%;
            height: 60px;
            line-height: 60px;
            border-radius: 30px;
            background-color: #f38181;
            box-shadow: 0 3px 3px 0 #dcdcdc;
            text-align: center;
            color: #ffffff;
            margin-bottom: 20px;
            font-size: 18px;
            margin: 24px auto;

        }

        #btn {
            height: 40px;
            width: 60px;
            line-height: 40px;
            border: none;
            outline: none;
            background-color: #95e1d3;
            border-radius: 30px;
            text-align: center;
            box-shadow: 0 3px 3px 0 #dcdcdc;
            margin-bottom: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th,
        td {
            border: 1px solid #dcdcdc;
            padding: 5px;
            text-align: center;
        }

        .selected {
            background-color: yellow;
        }
    </style>
    <script type="text/javascript">
        window.onload =  () => {

            var classMate = ["杨幂", "赵丽颖", "迪丽热巴", "张三", "崔雪莉", "郭雪芙", "权志龙", "王五", "杨洋", "周十", "易烊千玺", "杨紫", "关晓彤", "宋祖儿", "张艺兴", "吴磊", "肖战", "王一博", "李宇春", "邓紫棋", "毛阿敏", "周杰伦", "林俊杰", "王力宏", "陈奕迅", "张学友", "刘德华", "黎明", "郭富城", "谢霆锋", "张杰", "华晨宇", "许嵩", "李荣浩", "周深", "毛阿敏", "邓紫棋", "林忆莲", "那英", "蔡依林", "林志玲", " Bingbing", "杨幂", "黄磊", "迪丽热巴", "孙俪", "鹿晗", "邓超", "陈伟霆", "黄晓明", "杨洋", "王俊凯", "易烊千玺"];


            var btn = document.getElementById("btn");
            var info = document.getElementById("info");
            var table = document.getElementById("nameTable");
            var flag = false;
            var myinterval;
            var timeoutId;

            // 生成表格
            for (var i = 0; i < classMate.length; i++) {
                if (i % 11 === 0) {
                    var row = table.insertRow();
                }
                var cell = row.insertCell();
                cell.innerHTML = classMate[i];
            }

            btn.onclick =  () => {

                flag = !flag;

                if (flag) {

                    myinterval = setInterval( () => {
                        var num = Math.floor(Math.random() * classMate.length);
                        info.innerHTML = classMate[num];

                        // 高亮显示当前选中的名字
                        var cells = table.getElementsByTagName("td");
                        for (var i = 0; i < cells.length; i++) {
                            cells[i].classList.remove("selected");
                        }
                        cells[num].classList.add("selected");
                    }, 50);

                    btn.innerText = "暂停";

                    // 设置3秒后自动停止
                    timeoutId = setTimeout( () => {
                        flag = false;
                        clearInterval(myinterval);
                        btn.innerText = "开始";
                    }, 1500);   //定时器时间设置
                } else {
                    clearInterval(myinterval);
                    clearTimeout(timeoutId);
                    btn.innerText = "开始";
                }
            }
        }
    </script>
</head>

<body>
    <div class="container">
        <table id="nameTable">
            <tr>
                <th>姓名</th>
            </tr>
        </table>
        <div id="info">???</div>
        <button id="btn">开始</button>
    </div>
</body>

</html>